<template>
	<view class="">
		<view class="search-box pb-0 pt-0">
			<u-search placeholder="搜索关键字" shape="square" v-model="searchData.name" @search="onSearch" :showAction="false" />
			<view class="custom-btn" @click.stop="showInput=true">批量设置{{type==='2'?'折扣':'毛率'}}</view>
		</view>
		<view class="pl-20 pr-20 bg-white">
			<u-tabs 
				:list="tags" 
				:current="selectTag" 
				@click.stop="sectionChange" 
				lineColor="#e54d42"
				lineWidth="50"
				:activeStyle="{color:'#e54d42'}"
			/>
		</view>
		
		<view class="my-list padding-0">
			<u-list :height="swiperHeight" @scrolltolower="scrolltolower" v-if="dataList.length > 0">
				<u-list-item v-for="(item, index) in dataList" :key="item.id">
					<view class="item">
						<view class="flex justify-between align-center pb-20 border-b">
							<text>{{item.name}}</text>
							<text>￥{{item.price}}</text>
						</view>
						<view class="flex align-center pt-20">
							<text class="shrink0 mr-20">{{type==='2'?'联创折扣':'分红毛利率'}}</text>
							<view class="w-100">
								<u-input 
									v-if="type==='1'"
									type="digit" 
									v-model="item.bonusProfitRate" 
									placeholder="请输入" 
									border="none" 
									inputAlign="right"
									@confirm="ev=>setDividend(ev, item.id)">
									<template slot="suffix">
										<text>%</text>
									</template>
								</u-input>
								<u-input
								v-if="type==='2'"
									type="digit" 
									v-model="item.stockholderDiscount" 
									placeholder="请输入" 
									border="none" 
									inputAlign="right"
									@confirm="ev=>setDividend(ev, item.id)">
									<template slot="suffix">
										<text>折</text>
									</template>
								</u-input>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<!-- 无数据时默认显示 -->
		<view class="emptybox" v-if="dataList.length === 0">
			<u-empty icon-size="150" text="暂无数据" mode="data"></u-empty>
		</view>
		<u-popup :show="showInput" mode="center" @close="showInput=false" round="10" :safeAreaInsetBottom="false">
			<view class="padding-40 flex flex--row justify-center align-center">
				<u-input type="digit" v-model="batchVal" placeholder="请输入" inputAlign="center">
					<template slot="suffix">
						<text>{{type==='2'?'折':'%'}}</text>
					</template>
				</u-input>
				<view class="mt-40 width-140 pt-14 pb-14 bg-red line-white border-radius-10 fsize-26 text-align-center" @click="setDividendBatch">确定</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import listHeightMixin from '@/common/computedAltitude.js'
	export default {
		mixins:[listHeightMixin],
		data() {
			return {
				type:'1',
				showInput:false,
				tags: [],
				batchVal: null,
				selectTag: 0,
				dataList: [],
				searchData: {
					name:'',
					procectCategoryId: 0,
					page: 1,
					limit: 20
				},
				loadmore:{
					status: 'loadmore',
					iconType: 'flower',
					loadText: {
						loadmore: '轻轻上拉',
						loading: '努力加载中',
						nomore: '实在没有了'
					},
				},
			}
		},

		onLoad(opt) {
			this.type = opt.type
			this.dataList = [],
			this.getClas()
			this.getPageList()
			if(opt.type === '2'){
				uni.setNavigationBarTitle({
					title:'项目联创折扣'
				})
			}
		},
		methods: {
			setVerification(num){
				const nm = Number(num)
				if(this.type==='2' && !uni.$u.test.range(nm, [0, 10])){
					uni.showToast({ title:'请设置0-10之间的折扣', icon:'none' })
					return false
				}else if(this.type==='1' && !uni.$u.test.range(nm, [0, 100])){
					uni.showToast({ title:'请设置0-100之间的毛利率', icon:'none' })
					return false
				}else {
					return true
				}
			},
			setDividendBatch(){
				const that = this
				if(!this.setVerification(this.batchVal)) return 
				this.$reqJsonPost(this.type==='2'?'ProjectDoBatchModifyDiscount':'DoBatchModifyBonus',{id:0, data:Number(this.batchVal)}).then(res=>{
					uni.showToast({ title:res.msg, icon:'none' })
					if(this.type==='2'){
						this.dataList = this.dataList.map(im=>{
							im.stockholderDiscount = Number(that.batchVal)
							return im
						})
					}else {
						this.dataList = this.dataList.map(im=>{
							im.bonusProfitRate = Number(that.batchVal)
							return im
						})
					}
				})
				this.showInput = false
			},
			setDividend( num, id){
				if(!this.setVerification(num)) return 
				this.$reqJsonPost(this.type==='2'?'ProjectDoSetisDiscount':'DoSetisBonus', {id: id, data: num}).then(res=>{
					uni.showToast({ title:res.msg, icon:'none' })
				})
			},
			getClas(){
				this.$reqPost('ProjectCategoryGetPageList',{ page: 1, limit: 999 }).then(res=>{
					this.tags = res.data
					this.tags.unshift({ id: 0, name:'全部分类' })
				})
			},
			getPageList(){
				this.$reqPost('CoreCmsProjectList', this.searchData).then(res=>{
					this.dataList = [...this.dataList, ...res.data]
					if (res.count > this.dataList.length) {
							this.loadmore.status = 'loadmore'
							this.searchData.page++
						} else {
							// 数据已加载完毕
							this.loadmore.status = 'nomore'
						}
				})
			},
			scrolltolower() {
				if (this.loadmore.status === 'loadmore') {
					this.getPageList()
				}
			},
			sectionChange(e) {
				if (this.selectTag !== e.index){
					this.selectTag = e.index
					this.searchData.procectCategoryId = e.id
					this.onSearch()
				}
			},
			onSearch(value) {
				this.dataList = []
				this.searchData.page = 1
				this.getPageList()
			},
		}

	}
</script>

<style lang="scss" scoped>
	.search {
		padding: 10px 10px 0;
		background: #f8f8f8;
		height: 40px;
	}

	.tag {
		margin-left: 20rpx;
		font-size: 18rpx;
		font-weight: normal;
	}

	.btn-plus {
		position: absolute;
		bottom: 50rpx;
		right: 50rpx;
		z-index: 1;
		opacity: 0.6;
	}

	.btn-plus:hover {
		opacity: 1;
	}
	.subtitleinline {
		display: inline-block;
		padding-right: 10px;
		font-size: 14px;
	}

	.vertical-center {
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>